Distinctive Design

A Practical Guide to a Useful, Beautiful Web

Alexander Dawson

• Publisher: Wiley
• Year: 2011
• Print ISBN: 9781119992981
• eBook ISBN: 9781119993063
• Edition: 1
• Topic: Design
• Subtopic: Web Design

Learn to produce a web site that stands out from the crowd

One of the web designer's greatest challenges is to create a site distinctive enough to get noticed among the millions of sites already on the web. This book examines the bond between code, content and visuals to guide you through the factors that increase your design's visibility, usability and beauty. Using this practical advice, even web designers who lack strong artistic skills can develop super sites that strengthen the message and stand out from the crowd.

• Most books focus primarily on graphic design principles; this one shows you how to maximize and prioritize every design decision to help your site achieve its primary purpose: showcasing your content and services
• Explores the bond between code, content and visuals to guide you through the factors that increase your design's visibility, usability and beauty
• Enables even artistically challenged web designers to create elegant, functional layouts that attract visitors and are user-friendly

Every web designer can benefit from this practical advice on creating an informative, attractive, easy-to-use site that gets noticed.

Part I: Designing for the Web

Chapter 1: The Distinction of Web Design

Principles and variables of a visually appealing layout

Creating the ideal, aesthetically pleasing, distinctive design seems like an impossible task to many. While most web industry fields have their own methodology to improve and yield results in the layout and the structure of the content, a few basic defining concepts underpin the whole process of forging beautiful designs. Essentially, the goal is to achieve maximum impact on users.

Within this first chapter, I highlight the justifications for creating a distinctive design, the variables affecting the end users, and the importance of visibility. In addition, I provide a solid introduction to critical basic design concepts, including neutrality or balance. I also explain how to emphasize the right content, how to prioritize and analyze content in order to clean up an interface (using tools like minimalism), and how to avoid conflict and inconsistencies with websites.

Taking You Back to Basics

Within the realm of user experience, complexity has become the enemy of the people. Often at the most basic level, the need to create more intrinsically dynamic and functional designs causes website visitation (and the users who browse those sites) to suffer. Although the concept of “designing with purpose” is nothing new, how people read and recognize objects, and how much attention people give to some components within a layout compared to others, can be summed up in the four words shown in Figure 1-1.

Figure 1-1: Each and every element asks, “Can you see me?”

Treating the elements of your website like a living, breathing entity may seem rather silly at first, but the visualization it produces accurately reflects the situation. Just picture each part of your site as someone within a crowd. The loudest individuals are shouting above everyone else. This clashing certainly results in quieter voices going unnoticed, even if that voice is important within the project’s context.

Gauging every object’s importance against the level of noise and distraction elsewhere on the page is central to assigning a level of purposeful distinction to your pages. Your users have a limited attention span, and by ensuring that the objects on the page have a well-balanced proportion of importance versus voice, you create a distinctive—and visible—design that people can enjoy and browse without constraint.

To learn more about the average Internet user’s attention span (or lack thereof), check out this article by usability specialist Jakob Nielsen: www.useit.com/alertbox/timeframes.html

If something is visibly useful to a page, assign more attention to it (see Figure 1-2). Less important items on a page require less attention. You have little time to impress visitors before they hit the Back button or look elsewhere. The exact amount of time is up for debate, ranging from zero points of a second, as people subconsciously pre-judge what they see, to five or ten seconds. Web professionals often forget that selective emphasis holds importance!

Figure 1-2: A stylistic flourish within a page often depicts emphasis and strength.

The balancing act can be quite tricky. You should analyze and self-critique your methods as well as ask others to give feedback. Even negative feedback is helpful; actually, in many cases, it’s more helpful than positive feedback. The justification for many design choices rests upon those four essential words (refer to Figure 1-1); by wielding such control over a page, you ensure users find what they want (or need) at the point they require it.

Remember that feedback is quite subjective (and should be taken with a grain of salt). Don’t implement changes that users request on a whim without a good reason. Some things can actually make a design worse, and the last thing you want to do is destroy all your hard work!

Time, space, and relativity

Understanding the needs of your content is central to the concept of distinctive design, but the user experience demands more than simple information visibility. Although an inanimate object, your content has a few primary needs that must be accounted for in the overall layout, such as visibility and accessibility. Many variables can affect the duration and extent of a visitor’s experience, and while some of these are more imposing than others, such as pesky browser bugs and page availability, some can be tied into human perceptions and the amount of resources or self-sacrifice web professionals choose to assign to a service.

Time, space, relativity, and other variables speak volumes to the finite resources humans often temporarily assign to a site for the duration of their stay. Each variable ties deeply into the other because they are often measured upon the perception of whether the effort exerted by visitors matches the importance level of other events going on around them.

Check out this list of finite resources:

> Time: There’s only 24 hours in a day, and users rarely spend all of those browsing a single site. How much of this precious resource a visitor uses on your site depends on the value of the content.

> Space: The freedom to browse a site without inhibition is important to the overall user experience. If users feel restricted or forced into jumping through unnecessary hoops, they may exit!

> Relativity: The relationship between content and sites is important to the web. If a site’s content connects to a concept or subject introduced by another site, it may gain added attention.

> Money: Services with defined costs have to work even harder than free or ad-supported sites for attention. Since the content is provided behind a “paywall”, money is needed to gain visibility.

> Patience: The average visitor feels a great variety of emotions when browsing a site (some of which you can manipulate). If barriers to entry are high, the willingness to continue may be lost.

> Attention: Objects on a page are always vying for a user’s focus, and in polar opposition, users are themselves trying to get the attention they require from objects. This must be accounted for.

> Loyalty: By providing good experiences and reducing the levels of background noise, users are more likely to return to our sites.

> Trust: Use of a site is based on the value of its content and how reliable users deem its source. If your content is full of lies or inaccuracies, the content’s value is lowered.

> Energy: Users are expected to undertake so many activities within a page. Clicking, typing, and perhaps even more! Tiredness can work as an inhibitor when browsing the web. Don’t make users exert themselves.

These end-user functions (rather than controls of an interface) are subjective to every individual, but this doesn’t mean that they can’t be accounted for or measured. Don’t assume, for example, that visitors can (or want) to spend hours looking over a 5,000-page site filled with content. (Admit it: You’d lose your sanity if you had to scroll through them, so why would you torture someone else with such a process?) The balance between distinction and the variables mentioned earlier is important to get right; the two relate quite heavily to each other.

Making a website fun and engaging is among the best methods of distorting the time field of an end-user. People regularly waste endless hours playing games on the web, and if you are a creative individual, you can provide that sort of experience (and functionality) on your own site!

Albert Einstein once said, “Put your hand on a hot stove for a minute, and it seems like an hour. Sit with a pretty girl for an hour, and it seems like a minute. THAT’S relativity”. Einstein’s quote is a perfect reminder that a user’s experience should not be painful or unendurable to the point of feeling abandoned. A visitor shouldn’t feel useless in her quest for information. More importantly, it also shows that you can manipulate the variables that people use to measure your work’s value (such as time and trust) and affect the impact upon a user (see Figure 1-3 for an example).

Figure 1-3: Straightforward forms are much less time-intensive than complex documents.

Distinctive design influences the time it takes to locate important details within a page. It also sets the tone for how tedious or enjoyable finding that information is (and by association causes relativity to take effect). Understanding the connection between the actual amount of time visitors devote to your site and the perception of time they devote to your site provides you a rare opportunity to stand out, which, in turn, gives visitors the desire to return.

Consider the amount of time you spend playing a game in comparison to undertaking a job you don’t find particularly enjoyable. As you spend time doing something you enjoy, the focus you place on time spent is reduced, much like the famous saying “time flies when you’re having fun.” The “time flies” ideology (known ...

Table of contents

• Cover
• Table of Contents
• Title Page
• Introduction
• Part I: Designing for the Web
• Part II: The Art of Distinctive Documentation
• Part III: Implementing Design Theory
• Part IV: User-Centered Considerations
• Part V: Designing for Ubiquitous Users
• Bonus Chapter 1: Understanding Information Architecture
• Bonus Chapter 2: The Influence of Sociology
• Bonus Chapter 3: Accessibility: Removing Disability